<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Xianfei Digital WMS Big Data Visualization Analysis</title>
    <link href="${ctxPath}/assets/expand/images/zslogo02.png" rel="icon">
    <link rel="stylesheet" href="/assets/echarts/css/wms/iconfont.css">
	<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
</head>
<body>
<div class="container-header">
    <ul class="nowTime">
        <li>
			<select name="" class="select1" id="select1">
			</select>
		</li>
        <li>
			<select name="" class="select" id="select">
				<option value="SGJRCPK" selected="selected">中顺洁柔外租仓（丽洁仓）</option>
				<option value="SGJRDYK">中顺洁柔孝感抖音仓</option>
				<option value="SGJRDYK">中顺洁柔外租仓（老保丽仓）</option>
				<option value="JNK">济南成品仓</option>
				<option value="JNTHK">济南不良仓</option>
				<option value="QDK">青岛成品仓</option>
				<option value="QDTHK">青岛不良仓</option>
				<option value="STK">汕头成品库</option>
				<option value="STBLK">汕头不良库</option>
				<option value="WZK">温州成品库</option>
				<option value="WZBLK">温州不良库</option>
				<option value="SJZK">石家庄成品仓</option>
				<option value="SZBLK">石家庄不良品、退货仓</option>
				<option value="NJ01">南京成品仓</option>
				<option value="NJ02">南京不良仓</option>
				<option value="ZCJY">邹城嘉业商贸仓</option>
				<option value="KF-000001">贝因美退货仓</option>
				<option value="CLYT">长隆婴童仓</option>
				<option value="SZCP">苏州成品仓</option>
				<option value="SZBL">苏州不良仓</option>
				<option value="LZCP">兰州成品仓</option>
				<option value="LZBL">兰州不良仓</option>
				<option value="WHGX">芜湖干线成品仓</option>
				<option value="WFK">潍坊成品库</option>
				<option value="HEBK">哈尔滨成品仓</option>
				<option value="总部">总部自营</option>
				<option value="CDK">成都成品仓</option>
				<option value="DXK">东乡成品仓</option>
				<option value="CQK">重庆成品仓</option>
				<option value="TJK">天津成品仓</option>
				<option value="XGK">孝感成品仓</option>
				<option value="WHDRFK">芜湖大润发成品仓</option>
				<option value="WFSMK">潍坊成品仓</option>
				<option value="SYCPK">上虞成品库</option>
				<option value="ZBK">浙北成品库</option>
				<option value="XQL">新泉林成品库</option>
				<option value="JZTPS">九州通成品库</option>
			</select>
		</li>
    </ul>
    <div class="location">
        <!-- <i class="icon iconfont icon-buoumaotubiao23"></i>
        <span class="areaName"></span> -->
    </div>
    <h3>Xianfei Digital WMS Big Data Visualization Analysis</h3>
</div>
<div class="container-content">
    <div class="top">
		<div class="count-base" >
			<div class="com-count-title">Product Total Composition</div>
			<div class="com-screen-content">
				<div id="main1" style="width:100%;height:300px;"></div>
			</div>
			<span class="left-top"></span>
			<span class="right-top"></span>
			<span class="left-bottom"></span>
			<span class="right-bottom"></span>
		</div>
		<div class="count-resource q1">
			<div class="com-screen-content2">
				<ul class="use-data">
					<li>
						<p class="data-count" id="zongshuliang">0</p>
						<span class="data-name">Total Quantity</span>
					</li>
					<li>
						<p class="data-count" id="zongfangshu">0</p>
						<span class="data-name">Total Volume</span>
					</li>
					<li>
						<p class="data-count" id="zonghuozhi"></p>
						<span class="data-name">Total Value</span>
					</li>
				</ul>
				<div class="com-count-title shangtop">Monthly In/Out Warehouse Statistics</div>
				<div class="com-screen-content">
				 <div id="main2" style="margin-top:10px;width:100%;height:240px;"></div>
				</div>
				<span class="left-top"></span>
				<span class="right-top"></span>
				<span class="left-bottom"></span>
				<span class="right-bottom"></span>
			</div>
		</div>
		<div class="count-resource q2">
			<div class="com-count-title">Warranty Period Summary Analysis</div>
			<div class="com-screen-content">
			 <div id="main3" style="margin-top:10px;width:100%;height:240px;"></div>
			</div>
			<span class="left-top"></span>
			<span class="right-top"></span>
			<span class="left-bottom"></span>
			<span class="right-bottom"></span>
		</div>
    </div>
	
	<div class="mid">
		<div class="count-share w1" >
			<div class="com-count-title">Warehouse Flow Data Section</div>
			<div class="com-screen-content">
			    <div class="topRec_List">
					<dl>
						<dd>Product Name</dd>
						<dd>Business</dd>
						<dd>Quantity</dd>
						<dd>Time</dd>
					</dl>
					<div class="maquee" id="liudong">
					</div>
				</div>
			</div>
			<span class="left-top"></span>
			<span class="right-top"></span>
			<span class="left-bottom"></span>
			<span class="right-bottom"></span>
		</div>
		<div class="count-share w2" >
			<div class="com-count-title">Outbound Order Analysis</div>
			<div class="com-screen-content">
			 <div id="main5" style="width:100%;height:300px;"></div>
			</div>
			<span class="left-top"></span>
			<span class="right-top"></span>
			<span class="left-bottom"></span>
			<span class="right-bottom"></span>
		</div>
	</div>
	
	<div class="bottom">
		<div class="count-topic e1" >
			<div class="com-count-title">Mobile Picking Operation Monthly Ranking</div>
			<div class="com-screen-content">
			<div id="main6" style="width:100%;height:300px;"></div>
			</div>
			<span class="left-top"></span>
			<span class="right-top"></span>
			<span class="left-bottom"></span>
			<span class="right-bottom"></span>
		</div>
		<div class="count-topic e2" >
			<div class="com-count-title">Monthly Outbound Product Ranking</div>
			<div class="com-screen-content">
			 <div id="main7" style="width:100%;height:300px;"></div>
			</div>
			<span class="left-top"></span>
			<span class="right-top"></span>
			<span class="left-bottom"></span>
			<span class="right-bottom"></span>
		</div>
	</div>
	<div class="clearfix"></div>
</div>

<script src="/assets/echarts/js/echarts-tooltip-carousel.js"></script>
<script type="text/javascript"> 
//根据不同的分辨率调用不同的css和js
	if(window.screen.width>=1600){
		document.write("<link href='/assets/echarts/css/wms/test-1920-2.css' rel='stylesheet' type='text/css'>");  
		
		document.writeln("<script type=\"text/javascript\" src=\"/assets/echarts/js/wms/test-1920-2.js\"><\/script>");
	} else if(window.screen.width<1600&&window.screen.width>=1280){
		console.log("1280");
		document.write("<link href='/assets/echarts/css/wms/test-1280-2.css' rel='stylesheet' type='text/css'>");  
		
		document.writeln("<script type=\"text/javascript\" src=\"/assets/echarts/js/wms/test-1280-2.js\"><\/script>");
	} else{
		console.log("1024");
		document.write("<link href='/assets/echarts/css/wms/test-1024-2.css' rel='stylesheet' type='text/css'>");  
		
		document.writeln("<script type=\"text/javascript\" src=\"/assets/echarts/js/wms/test-1024-2.js\"><\/script>");
	}
</script>

<script type="text/javascript"> 
	  function autoScroll(obj){  
			$(obj).find("ul").animate({  
				marginTop : "-39px"  
			},500,function(){  
				$(this).css({marginTop : "0px"}).find("li:first").appendTo(this);  
			})  
		}  
		$(function(){  
			setInterval('autoScroll(".maquee")',2000);
		}) 
</script> 
</body>
</html>